<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>会员注册</title>
    <meta name="keywords" content="">
    <meta name="description" content="">
    <script src="js/rem.js"></script>

    <script src="js/mui.min.js" type="text/javascript"></script>
    <script src="js/jquery.min.js" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="css/base.css"/>
    <link rel="stylesheet" type="text/css" href="css/page.css"/>
    <link rel="stylesheet" type="text/css" href="css/all.css"/>
    <link rel="stylesheet" type="text/css" href="css/mui.min.css"/>
    <link rel="stylesheet" type="text/css" href="css/loaders.min.css"/>
    <link rel="stylesheet" type="text/css" href="css/loading.css"/>
    <link rel="stylesheet" type="text/css" href="slick/slick.css"/>
    <style>
        .captchaImg {
            /*position: relative;*/
            margin: auto auto;
            left: 0.1em;
            top: 0.2em;
            right: 0.1em;
            bottom: 0.2em;
            width: auto;
            /*height:auto;*/
            max-width: 85%;
            max-height: 85%;

        }
    </style>
    <script type="text/javascript">
        $(window).load(function () {
            $(".loading").addClass("loader-chanage").fadeOut(300)
        })
    </script>
</head>
<!--loading页开始-->
<div class="loading">
    <div class="loader">
        <div class="loader-inner pacman">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>
</div>
<!--loading页结束-->
<body>
<div class="login clearfloat box-s">
    <h3>会员注册</h3>
    <div class="list clearfloat">
        <ul>
            <li class="ra3 form-group must-have">
                <p class="fl clearfloat">
                    <span class="opa5"></span>
                    <i class="iconfont icon-yonghuming"></i>
                </p>
                <div class="nr nrtwo clearfloat fl">
                <span class="opa3"></span>
                <input type="text" name="" id="username" value="" placeholder="用户姓名"/>
                <samp class="db fr"
                      style="background-color: rgba(255, 255, 255, 0);color: red;font-size: 0.8em"></samp>
                </div>
            </li>
            <li class="ra3 form-group must-have">
                <p class="fl clearfloat">
                    <span class="opa5"></span>
                    <i class="iconfont icon-mima"></i>
                </p>
                <div class="nr nrtwo clearfloat fl">
                    <span class="opa3"></span>
                    <input type="text" name="" id="pwd" value="" placeholder="登录密码"/>
                    <samp class="db fr"
                          style="background-color: rgba(255, 255, 255, 0);color: red;font-size: 0.8em"></samp>
                </div>
            </li>
            <li class="ra3 form-group">
                <p class="fl clearfloat">
                    <span class="opa5"></span>
                    <i class="iconfont icon-shouji"></i>
                </p>
                <div class="nr clearfloat fl">
                    <span class="opa3"></span>
                    <input type="text" name="" id="phone" value="" placeholder="联系电话"/>
                </div>
            </li>
            <li class="ra3 form-group">
                <p class="fl clearfloat">
                    <span class="opa5"></span>
                    <i class="iconfont icon-shenfenzheng"></i>
                </p>
                <div class="nr clearfloat fl">
                    <span class="opa3"></span>
                    <input type="text" name="" id="cardId" value="" placeholder="身份证号"/>
                </div>
            </li>
            <li class="ra3 form-group">
                <p class="fl clearfloat">
                    <span class="opa5"></span>
                    <i class="iconfont icon-tuijianrenyaoqing"></i>
                </p>
                <div class="nr clearfloat fl">
                    <span class="opa3"></span>
                    <input type="text" name="" id="recommendUser" value="" placeholder="推荐人账户"/>
                </div>
            </li>
            <li class="ra3 form-group">
                <p class="fl clearfloat">
                    <span class="opa5"></span>
                    <i class="iconfont icon-yanzhengma"></i>
                </p>
                <div class="nr nrtwo clearfloat fl">
                    <span class="opa3 cap_touch"></span>
                    <input type="text" name="" id="captcha" value="" placeholder="验证码"/>
                    <samp class="db fr" style="background-color: #ffffff;"><img class="captchaImg"
                                                                                src="/captcha"/></samp>
                </div>
            </li>
        </ul>
    </div>
    <div class="login-btn">
        <a id="btnSubmit" href="#">
            注册
        </a>
    </div>
    <div class="mima mimaone clearfloat">
        <ul>
            <li class="fr">
                <a href="login.html">立即登录</a>
            </li>
        </ul>
    </div>
</div>
</body>

<script type="text/javascript">
    var urlPrefix = localStorage.getItem("serverPrefix") ? localStorage.getItem("serverPerfix") : "";
    var regUrl = urlPrefix + "/users/regist"

    $(function () { // 页面就绪事件
        // 为提交按钮添加点击事件
        $("#btnSubmit").click(function () {
            // 获取表单数据
            var username = $("#username").val();
            var pwd = $("#pwd").val();
            var phone = $("#phone").val();
            var captcha = $("#captcha").val();
            // var rePwd=$("#rePwd").val();
            // 前台表单验证
            var flag = true;

            //用户名不能为空
            // flag=checkEmpty("username","用户名不能为空")&&flag;
            // //确认用户密码不能空
            // flag=checkEmpty("pwd","确认密码不能为空")&&flag;
            // //用户名在6-12位之间
            // flag=checkLength("username",6,12)&&flag;

            // 判断页面中的input是否都是验证成功的状态
            var divArr = $(".must-have.has-success");
            if (divArr.length != 2) { // 存在异常项
                return;
            }

            // 有验证异常则不提交表单
            if (flag == false) {
                return;
            }
            var params = {
                username: username,
                password: pwd,
                phone: phone,
                captcha: captcha.toLowerCase()

            }
            // 发送AJAX请求
            $.post(regUrl, params, function (result) {
                // 处理响应数据
                if (result.state == 1000) { // 正常响应
                    // 跳转登录页面
                    history.replaceState(null, null, 'center.html')
                    window.location.reload()
                } else { // 异常响应
                    alert(result.msg);
                    $(".captchaImg").attr("src", "/captcha?timestamp=" + new Date().getTime())
                }
            });
        });

        $("#username").bind("input", function () {
            checkLength("username", 6, 12);
        });

        $(".cap_touch").click(function () {
            $(".captchaImg").attr("src", "/captcha?timestamp=" + new Date().getTime())
        })

        // 为用户名输入框添加失去焦点事件
        $("#username").blur(function () {
            if (!checkEmpty("username", "用户名不能为空")) {
                return;
            }
            if (!checkLength("username", 6, 12)) {
                return;
            }
            // 异步验证用户名是否存在
            var url = "../users/checkUsername";
            var params = {
                username: $("#username").val()
            };
            $.get(url, params, function (result) {
                if (result.state == 1000 && result.msg == "false") { // 不存在
                    $("#username").parents(".form-group").removeClass("has-error").addClass("has-success");
                    // 找到input相邻的span，在其中添加错误提示信息
                    $("#username").next("div samp").text("该用户可以使用");
                } else if (result.state == 1000 && result.msg == "true") { // 已存在
                    $("#username").parents(".form-group").addClass("has-error").removeClass("has-success");
                    // 找到input相邻的span，在其中添加错误提示信息
                    $("#username").next("div samp").text("该用户名已存在");
                } else {
                    $("#username").parents(".form-group").addClass("has-error").removeClass("has-success");
                    // 找到input相邻的span，在其中添加错误提示信息
                    $("#username").next("div samp").text(result.msg);
                }
            });
        });

        // 为密码输入框添加失去焦点事件
        $("#pwd").blur(function () {
            checkEmpty("pwd", "密码不能为空");
        });
    });

    function checkLength(name, minLength, maxLength) {
        if ($("#" + name).val().length < minLength) { // 小于长度
            $("#" + name).parents(".form-group").addClass("has-error").removeClass("has-success");
            // 找到input相邻的span，在其中添加错误提示信息
            $("#" + name).next("div samp").text("长度不能小于" + minLength);
            return false;
        } else if ($("#" + name).val().length > maxLength) {
            $("#" + name).parents(".form-group").addClass("has-error").removeClass("has-success");
            // 找到input相邻的span，在其中添加错误提示信息
            $("#" + name).next("div samp").text("长度不能大于" + maxLength);
            return false;
        } else { // 长度合适
            $("#" + name).parents(".form-group").removeClass("has-error").addClass("has-success");
            // 找到input相邻的span，在其中添加错误提示信息
            $("#" + name).next("div samp").text("");
            return true;
        }
    }

    function checkEmpty(name, msg) {
        if ($("#" + name).val() == "") { // 为空
            $("#" + name).parents(".form-group").addClass("has-error").removeClass("has-success");
            // 找到input相邻的span，在其中添加错误提示信息
            $("#" + name).next("div samp").text(msg);
            return false;
        } else { // 不为空
            $("#" + name).parents(".form-group").removeClass("has-error").addClass("has-success");
            // 找到input相邻的span，在其中添加错误提示信息
            $("#" + name).next("div samp").text("");
            return true;
        }
    }
</script>


</html>
